/**
 * @Description: 常用css属性 mixin
 * @author 刘贵
 * @date 2020/11/16
*/

@import "variable";

@function unicode($str) {
  @return unquote("\"")+unquote(str-insert($str, "\\", 1))+unquote("\"");
}

@function unit($number) {
  @return $number / ($number * 0 + 1);
}

@mixin border-top-radius($radius) {
  border-top-left-radius: $radius;
  border-top-right-radius: $radius;
}

@mixin border-right-radius($radius) {
  border-top-right-radius: $radius;
  border-bottom-right-radius: $radius;
}

@mixin border-bottom-radius($radius) {
  border-bottom-right-radius: $radius;
  border-bottom-left-radius: $radius;
}

@mixin border-left-radius($radius) {
  border-top-left-radius: $radius;
  border-bottom-left-radius: $radius;
}

@mixin text-gradient() {
  @content;

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

//占位符
@mixin placeholder($color: #999) {
  &::-webkit-input-placeholder {
    color: $color;
  }
  // Safari and Chrome
}

@mixin mr-x($leftPx, $rightPx: $leftPx) {
  margin-right: $rightPx;
  margin-left: $leftPx;
}

@mixin mr-y($topPx, $bottomPx: $topPx) {
  margin-top: $topPx;
  margin-bottom: $bottomPx;
}

@mixin pd-x($leftPx, $rightPx: $leftPx) {
  padding-right: $rightPx;
  padding-left: $leftPx;
}

@mixin pd-y($topPx, $bottomPx: $topPx) {
  padding-top: $topPx;
  padding-bottom: $bottomPx;
}

//背景设置
@mixin bg-u($val: none) {
  background-image: url($val);
}

@mixin bg-c($val: transparent) {
  background-color: $val;
}

@mixin bg-r($val: no-repeat) {
  background-repeat: $val;
}

@mixin bg-p($val: center center) {
  background-position: $val;
}

@mixin bg-img($url, $repeat: no-repeat, $position: center center) {
  @include bg-u($url);
  @include bg-r($repeat);
  @include bg-p($position);
}

@mixin bg-all($color, $url, $repeat: no-repeat, $position: center center) {
  @include bg-c($color);
  @include bg-u($url);
  @include bg-r($repeat);
  @include bg-p($position);
}

/**
 *
  @include create-animate(line1) {
    0% { color: red;}
    100% { color: red;}
  }
 */
@mixin create-animate($name) {
  @-webkit-keyframes #{$name} {
    @content;
  }

  @keyframes #{$name} {
    @content;
  }
}

// 使用动画
@mixin use-animate($animation) {
  -webkit-animation: $animation;
  animation: $animation;
}

@mixin size($widthPx, $heightPx: $widthPx) {
  width: $widthPx;
  height: $heightPx;
}

@mixin size-font($widthPx, $heightPx: $widthPx, $line-heightPx: $heightPx) {
  width: $widthPx;
  height: $heightPx;
  line-height: $line-heightPx;
}

@mixin size-font-h($heightPx, $line-heightPx: $heightPx) {
  height: $heightPx;
  line-height: $line-heightPx;
}

@mixin p-common($prop, $value, $prefix: ec, $unit: px) {
  $v: unit($value);
  $result-value: if(unitless($value), $value + $unit, $value);
  .#{$prefix}-#{$prop}-top#{$v} {
    #{$prop}-top: $result-value;
  }
  .#{$prefix}-#{$prop}-bottom#{$v} {
    #{$prop}-bottom: $result-value;
  }
  .#{$prefix}-#{$prop}-left#{$v} {
    #{$prop}-left: $result-value;
  }
  .#{$prefix}-#{$prop}-right#{$v} {
    #{$prop}-right: $result-value;
  }
  .#{$prefix}-#{$prop}-x#{$v} {
    #{$prop}-left: $result-value;
    #{$prop}-right: $result-value;
  }
  .#{$prefix}-#{$prop}-y#{$v} {
    #{$prop}-bottom: $result-value;
    #{$prop}-top: $result-value;
  }
}

@mixin them-btn($name, $bg-color, $font-color: #fff) {
  .#{$name} {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 100%;
    color: $font-color !important;
    font-size: 15px;
    line-height: 2.93;
    text-align: center;
    background-color: $bg-color !important;
    border: 0;

    &,
    &::before,
    &::after {
      border-radius: 3px;
    }

    &[size=big] {
      font-size: 18px;
      line-height: 3;
    }

    &[size=medium] {
      font-size: 15px;
      line-height: 2.8;
    }

    &[size=small] {
      font-size: 14px;
      line-height: 2.54;
    }

    &[size=mini] {
      display: inline-block;
      width: auto;
      padding-right: 1.2em;
      padding-left: 1.2em;
      font-size: 12px;
      line-height: 2.2;
    }

    &.inline {
      display: inline-block;
      padding-right: 1.56em;
      padding-left: 1.5em;
    }

    &::after {
      border-color: darken($bg-color, 4%) !important;
    }

    &.disabled {
      opacity: 0.4;

      &::before {
        display: none !important;
      }
    }

    &.round {
      &,
      &::before,
      &::after {
        border-radius: 10000px;
      }
    }

    .full-border,
    &.border {
      &,
      &::after {
        border-color: darken($bg-color, 4%) !important;
      }
    }

    &.lighten {
      color: $bg-color !important;
      background-color: lighten($bg-color, 38%) !important;
    }

    &[plain],
    &.plain {
      color: $bg-color !important;
      background-color: transparent !important;

      &,
      &::after {
        border-color: $bg-color !important;
      }
    }

    &[disabled] {
      &::before {
        display: none !important;
      }
      //opacity: 0.4;

      /*      background-color: $bg-color!important;
      color: $font-color!important;
      &:after {
        border-color: darken($bg-color, 2%)!important;
      }
      &[plain] {
        background-color: transparent!important;
        color: $bg-color!important;
      } */
    }

    &:active {
      &::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #fff;
        opacity: 0.14;
        content: "";
      }
    }
  }
}

@mixin them-background ($name, $bg-color, $font-color) {
  .#{$name} {
    background-color: $bg-color;

    &.color {
      color: $font-color;
    }

    .full-border,
    & {
      border-color: darken($bg-color, 8%) !important;
    }

    &.lighten {
      $bg: lighten($bg-color, 38%);

      background-color: $bg !important;

      &.color {
        color: $bg-color !important;
      }

      .full-border,
      & {
        border-color: darken($bg, 8%) !important;
      }
    }

    &.plain {
      background-color: transparent !important;

      &.color {
        color: $bg-color !important;
      }

      .full-border,
      & {
        border-color: $bg-color !important;
      }
    }

    &.round {
      border-radius: 100px;

      .full-border {
        border-radius: 100px;
      }
    }
  }
}

@mixin them-font ($name, $bg-color, $font-color) {
  .#{$name} {
    color: $bg-color;
  }
}
